<template>
    <div style="height: 120%;">
        <el-row type="flex" justify="center"
                :gutter="20" style="height: auto;">
                <el-col :span="5" :offset="2" >
                    <el-menu
                            default-active="totalSale"
                            class="el-menu-vertical-demo"
                            @select="handleSelect"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                    style="box-shadow: 0 4px 8px;height: 100%;border-radius:4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                        <el-menu-item index="totalSale">
                            <i class="el-icon-data-line"></i>总销量统计</el-menu-item>
                        <el-menu-item  index="suvAndMpvSales">
                            <i class="el-icon-pie-chart"></i>车型总销量占比</el-menu-item>
                        <el-submenu index="type">
                            <template slot="title">
                                <span><i class="el-icon-search"></i>车型销量</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="(typeLegend,index) in carSaleTrendLegends" :key=index :index="'carSaleTrend/'+typeLegend">
                                    <span v-text="typeLegend"></span>销量走势</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="national">
                            <template slot="title">
                                <span><i class="el-icon-magic-stick"></i>汽车国系</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="(nationalLegend,index) in nationalCarSaleLegends" :key=index :index="'nationalCarSales/'+nationalLegend">
                                    <span v-text="nationalLegend"></span>系列销量走势</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item index="totalNationalSale">
                            <i class="el-icon-coordinate"></i>国系销量占比</el-menu-item>
                        <el-menu-item index="suvNationalSale">
                            <i class="el-icon-s-data"></i>SUV国系销量对比</el-menu-item>
                        <el-menu-item index="mpvNationalSale">
                            <i class="el-icon-s-data"></i>MPV国系销量对比</el-menu-item>
                        <el-menu-item index="carSaleMonthTopTen">
                            <i class="el-icon-tickets"></i>各月前十热门车辆排行榜</el-menu-item>
                        <el-menu-item index="brandSale"><span slot="title">
                            <i class="el-icon-s-data"></i>品牌销量</span></el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="14"  v-loading="loading" style="height:auto;background-color:white;border-radius:4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                    <!--                        放置销售分析视图组件-->
                    <transition name="fade" mode="out-in">
                        <router-view></router-view>
                    </transition>
                </el-col>


        </el-row>
    </div>
</template>

<script>
    let saleAnaly={
        data() {
            return {
                defaultViewName: 'totalSale',
                carSaleTrendLegends: [],
                nationalCarSaleLegends:[],
                year: '',
                loading: true,
// carSaleTrendSer
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push({path:'/saleAnaly/'+key})
            },
        },


        created() {
            this.year = String(new Date().getFullYear());
            //carSaleTrend 车型销量走势
            //获取legend，根据今年数据生成动态按钮
            this.$http({
                url: this.$http.adornUrl('/get/carSaleTrend'),
                method: 'get',
                params: this.$http.adornParams({
                        'year': (this.year),
                    },
                ),
            }).then(form => {
                if (form.data.status == "0") {
                    let legendData = form.data['series'].map(e => e.name);
                    this.carSaleTrendLegends=legendData
                } else {
                    this.$message("数据有误，请等待管理员处理")
                }
            });

            //nationalCarSales 各国系销量走势
            this.$http({
                url: this.$http.adornUrl('/get/nationalCarSales'),
                method: 'get',
                params: this.$http.adornParams({
                        'year': (this.year),
                    },
                ),
            }).then(form => {
                if (form.data.status == "0") {
                    let legendData = form.data['series'].map(e => e.name);
                    this.nationalCarSaleLegends=legendData
                } else {
                    this.$message("数据有误，请等待管理员处理")
                }
            });
            this.loading = false;
        },
    };
    export default saleAnaly
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>